<template>
    <a-select v-model="selectedOption" :options="optionsList" :placeholder="placeholderText"
        @change="handleChange"></a-select>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: null
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    watch: {
        value(value) {
            this.selectedOption = value != null ? value : null
            if (this.selectedOption == []) {
                this.getRules()
            } else {
                return
            }
        }
    },
    data() {
        return {
            selectedOption: this.value != null ? this.value : null,
            optionsList: [],
            placeholderText: '请选择一个选项',
            url: {
                getPageSet: 'system/sysRule/getAllRules'
            }
        };
    },
    created() {
        this.getRules()
    },
    methods: {
        handleChange(value) {
            this.selectedOption = value;
            this.$emit('change', value);
        },
        getRules() {
            this.optionsList = []
            this.$get(this.url.getPageSet).then((res) => {
                res.data.map((item) => {
                    this.optionsList.push(
                        { value: item.ruleCode, label: item.ruleName }
                    )
                })
                if (this.optionsList.length > 0 && !this.selectedOption) { 
                    this.selectedOption = this.optionsList[0].value 
                    this.handleChange(this.selectedOption) 
                }
            })
        },
    }
}
</script>
